<template>
  <view class="activity-box">
    <template v-if="isCustomImage">
      <slot name="image"></slot>
    </template>
    <template v-else>
      <view
        v-if="info.coverUrl || info.coverUrl || needDefaultImage"
        class="activity-box-image common-image-corner"
      >
        <image
          class="img"
          :src="judgeShowImage(info.coverUrl, info.liveUrl)"
          mode="aspectFill"
        />
      </view>
    </template>
    <view class="activity-box-info">
      <view
        v-if="info.name"
        class="info-title"
      >
        {{ info.name }}
      </view>
      <view
        v-if="info.activityName"
        class="info-title"
      >
        {{ info.activityName }}
      </view>
      <view
        v-if="showType"
        class="info-desc"
      >
        活动类型：{{ info.type_dictText }}
      </view>
      <view class="info-desc">活动时间：{{ info.date }}</view>
      <view
        v-if="showAddress"
        class="info-desc"
      >
        活动地点：{{ info.address }}
      </view>
      <view class="info-address">
        <wd-icon
          name="location"
          size="14px"
        ></wd-icon>
        {{ info.hallId_dictText }}
      </view>
    </view>
    <view class="activity-box-status">
      <template v-if="isCustom">
        <slot name="operate"></slot>
      </template>
      <template v-else>
        <!-- 如果状态为“已完成” -->
        <template v-if="info.status === 'complete'">
          <!-- 且有分数，则显示分数 -->
          <view
            v-if="info.totalScore"
            class="score"
          >
            <text class="score-number">{{ info.totalScore }}</text>
            <text class="score-unit">分</text>
          </view>
          <!-- 否则，显示“待考核” -->
          <view v-else>
            <wd-button
              type="info"
              disabled
              size="small"
            >
              待考核
            </wd-button>
          </view>
        </template>
        <template v-else>
          <!-- 在“未完成”的状态中，toBegin 待开始 状态，显示状态 tag，其他两个状态显示上传按钮 -->
          <template v-if="info.status === 'toBegin'">
            <wd-tag
              custom-class="common-status-tag"
              :bg-color="returnStatusColor(info.status, activityDeclareStatus)"
            >
              {{ info.status_dictText }}
            </wd-tag>
          </template>
          <template v-else>
            <wd-button
              size="small"
              @click="
                uniNavigateTo(`/pages-sub/activity/upload/index?id=${info.id}`)
              "
            >
              上传
            </wd-button>
          </template>
        </template>
      </template>
    </view>
  </view>
</template>

<script setup>
import { uniNavigateTo, judgeShowImage, returnStatusColor } from '@/utils'
import { useDictStore } from '@/store/dict'

const { activityDeclareStatus } = useDictStore().dictData

const props = defineProps({
  info: {
    type: Object,
    default: () => {
      return {
        id: 0,
        name: '',
        type_dictText: '',
        date: '',
        address: '',
        hallId_dictText: '',
        coverUrl: '',
      }
    },
  },
  isCustom: {
    type: Boolean,
    default: false,
  },
  isCustomImage: {
    type: Boolean,
    default: false,
  },
  showType: {
    type: Boolean,
    default: true,
  },
  showAddress: {
    type: Boolean,
    default: false,
  },
  needDefaultImage: {
    type: Boolean,
    default: true,
  },
})
</script>

<style lang="scss">
.activity-box {
  display: flex;
  padding-bottom: $uni-spacing-col-lg;
  margin-bottom: $uni-spacing-col-lg;
  border-bottom: 1px solid $uni-border-color;

  &-image {
    flex: 2;
  }

  &-info {
    flex: 3;

    .info-title {
      margin-bottom: $uni-spacing-row-sm;
      font-size: $uni-font-size-lg;
      font-weight: 600;
      color: $uni-text-color;
    }

    .info-desc {
      margin-bottom: $uni-spacing-row-sm;
      font-size: $uni-font-size-base;
      color: $uni-text-color-grey;
    }

    .info-address {
      font-size: $uni-font-size-base;
    }
  }

  &-status {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: end;

    .score {
      width: 100%;
      background: linear-gradient(135deg, green, blue);
      -webkit-text-fill-color: transparent;
      background-clip: text;

      &-number {
        font-size: $uni-font-size-lg;
      }
    }
  }
}
</style>
